import './ScreenTemp.scss'
import { useState, useRef } from 'react'
import { useBoolean, useSize } from 'ahooks'
import { CommonSmallTitle } from '../Common/SmallTitle'
import { ColumnConfigA01Template, LineConfigA01Template } from './AssetsCharts'
import { TableList } from '../Modal/TableList'

import { project } from '../../../../Common/Data'
const { imageUrl } = project[window.location.hostname]

const style = {
    ColumnColor:
        'l(90) 0:rgba(155, 253, 255, 1) 1:rgba(155, 253, 255, 0.2)&l(90) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)&l(90) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)&l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)&l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
    ColumnWidth: 16,
    ColumnLegend: false,
    LegendPossion: 'top',
    LegendoffsetY: 10,
    Legendfill: '#B2FBFD',
    LegendfontSize: 12,
    XLine: '#B2FBFD',
    XLabel: '#B2FBFD',
    XTick: '#B2FBFD',
    YTitle: '',
    YTColor: '#B2FBFD',
    YPosi: 'end',
    YAuto: true,
    YOffset: 50,
    YColoc: '#B2FBFD',
    YNumber: 5,
    YGrid: 'rgba(155, 253, 255, 0.35)',
    BarStatus: false,
    BarHeight: 8,
    BarWidth: 80,
    BarTrack: 'rgba(178, 251, 253, 0.2)',
    BarThumb: 'rgba(178, 251, 253, 1)',
    BarHover: '#367EF2',
}

const A01 = () => {
    const List = [
        { uuid: 1, title: '总金额', value: 'A01', unit: '万元', icon: 'ScreenA01.png', color: '#CAFCFF' },
        { uuid: 2, title: '已结金额', value: 'A01', unit: '万元', icon: 'ScreenA02.png', color: '#CAFCFF' },
        { uuid: 3, title: '未结金额', value: 'A01', unit: '万元', icon: 'ScreenA03.png', color: '#CAFCFF' },
        { uuid: 4, title: '承运单位', value: 'A01', unit: '个', icon: 'ScreenA04.png', color: '#9BFFC3' },
        { uuid: 5, title: '累计进场', value: 'A01', unit: '台', icon: 'ScreenA05.png', color: '#9BFFC3' },
        { uuid: 6, title: '当前在场', value: 'A01', unit: '台', icon: 'ScreenA06.png', color: '#9BFFC3' },
    ]
    const [Data] = useState({ A01: 999999 })
    return (
        <CommonSmallTitle title="运输情况">
            <div className="TempBox">
                {List.map(({ uuid, title, value, unit, icon, color }) => (
                    <div key={uuid} style={{ '--color': color }}>
                        <div>
                            <img src={imageUrl + icon} alt="" />
                            <div>{title}</div>
                        </div>
                        <div>{Data[value]}</div>
                        <div>{unit}</div>
                        <div />
                        <div />
                    </div>
                ))}
            </div>
        </CommonSmallTitle>
    )
}
const A02 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    return (
        <CommonSmallTitle title="承运单位运费汇总">
            <div className="TempBox" ref={ChartsBox}>
                {size && (
                    <ColumnConfigA01Template
                        data={[]}
                        size={size}
                        style={{ ...style, YTitle: '台' }}
                        click={e => {
                            console.log('点击回调', e)
                        }}
                    />
                )}
            </div>
        </CommonSmallTitle>
    )
}
const A03 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    return (
        <CommonSmallTitle title="材料运费汇总">
            <div className="TempBox" ref={ChartsBox}>
                {size && <ColumnConfigA01Template data={[]} size={size} style={{ ...style, YTitle: '万元' }} />}
            </div>
        </CommonSmallTitle>
    )
}
const A04 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    return (
        <CommonSmallTitle title="机械进场情况">
            <div className="TempBox" ref={ChartsBox}>
                {size && <ColumnConfigA01Template data={[]} size={size} style={{ ...style, YTitle: '万元' }} />}
            </div>
        </CommonSmallTitle>
    )
}
const A05 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    return (
        <CommonSmallTitle title="材料运输情况">
            <div className="TempBox" ref={ChartsBox}>
                {size && <ColumnConfigA01Template data={[]} size={size} style={style} />}
            </div>
        </CommonSmallTitle>
    )
}
const A06 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    return (
        <CommonSmallTitle title="供应商材料费汇总">
            <div className="TempBox" ref={ChartsBox}>
                {size && <ColumnConfigA01Template data={[]} size={size} style={style} />}
            </div>
        </CommonSmallTitle>
    )
}
const A07 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    return (
        <CommonSmallTitle title="材料费汇总">
            <div className="TempBox" ref={ChartsBox}>
                {size && <ColumnConfigA01Template data={[]} size={size} style={style} />}
            </div>
        </CommonSmallTitle>
    )
}
const A08 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    return (
        <CommonSmallTitle title="运输明细">
            <div className="TempBox" ref={ChartsBox}>
                {size && <LineConfigA01Template data={[]} size={size} style={style} />}
            </div>
        </CommonSmallTitle>
    )
}
const A09 = () => {
    return (
        <CommonSmallTitle title="数据分析">
            <TableList data={{ type: 'ScreenTableList' }} />
        </CommonSmallTitle>
    )
}

export const ScreenTemp = () => {
    const [state, { toggle }] = useBoolean(true)
    return (
        <div className={`ScreenTemp ${state ? 'TempTrue' : 'TempFalse'}`}>
            <div
                className={`Temp TempA01 animate__animated ${
                    state ? 'animate__delay-1s animate__bounceInDown' : 'animate__bounceOutUp'
                }`}
            >
                <div className="toggle" onClick={toggle}>
                    {' '}
                    明细数据{' '}
                </div>
                <A01 />
            </div>
            <div
                className={`Temp TempA02 animate__animated ${
                    state ? 'animate__delay-1s animate__bounceInLeft' : 'animate__bounceOutLeft'
                }`}
            >
                <A02 />
            </div>
            <div
                className={`Temp TempA03 animate__animated ${
                    state ? 'animate__delay-1s animate__bounceInRight' : 'animate__bounceOutRight'
                }`}
            >
                <A03 />
            </div>
            <div
                className={`Temp TempA02 animate__animated ${
                    state ? 'animate__delay-1s animate__bounceInLeft' : 'animate__bounceOutLeft'
                }`}
            >
                <A04 />
            </div>
            <div
                className={`Temp TempA03 animate__animated ${
                    state ? 'animate__delay-1s animate__bounceInRight' : 'animate__bounceOutRight'
                }`}
            >
                <A05 />
            </div>
            <div
                className={`Temp TempA02 animate__animated ${
                    state ? 'animate__delay-1s animate__bounceInLeft' : 'animate__bounceOutLeft'
                }`}
            >
                <A06 />
            </div>
            <div
                className={`Temp TempA03 animate__animated ${
                    state ? 'animate__delay-1s animate__bounceInRight' : 'animate__bounceOutRight'
                }`}
            >
                <A07 />
            </div>
            <div
                className={`Temp TempA04 animate__animated ${
                    state ? 'animate__delay-1s animate__bounceInUp' : 'animate__bounceOutDown'
                }`}
            >
                <A08 />
            </div>
            <div
                className={`Temp TempA05 animate__animated ${
                    state ? 'animate__bounceOut' : 'animate__delay-1s animate__bounceIn'
                }`}
            >
                <div className="toggle" onClick={toggle}>
                    {' '}
                    数据分类{' '}
                </div>
                <A09 />
            </div>
        </div>
    )
}
